<template>
    <div class="content-box">
        <div class="serchBoxa clearfix">
             <el-select v-model="dateType" placeholder="Select" style="margin-right:10px;width:100px">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>

            <el-date-picker v-if="dateType == 'week'"
                v-model="dateValueWeek"
                type="week"
                format="[Week] ww"
                placeholder="请选择周"
            />
            <el-date-picker v-if="dateType == 'month'"
                v-model="dateValueMonth"
                type="month"
                placeholder="请选择月份"
            />
            <el-date-picker v-if="dateType == 'dates'"
                v-model="dateValueDates"
                type="daterange"
                range-separator="至"
                start-placeholder="请选择开始日期"
                end-placeholder="请选择结束日期"
            />
        </div>
        <!-- <div class="leftTitle">
            页面数据
        </div> -->
        <div class="containerBox">
            
            <div class="clearfix">
                <div class="leftTitle">
                    新增用户
                    <span class="cursorPointer">
                            <el-tooltip content="新增用户 = 每天新注册用户数量" placement="right" effect="light">
                                <el-icon><Warning /></el-icon>
                            </el-tooltip>
                        </span>
                </div>
                <div class="leftCon">
                    <div class="chart-box">
                        <BarChartVue :options-func="chartOptionFunc1"></BarChartVue>
                    </div>
                </div>
            </div>
        </div>
        <div class="containerBox">
            
            <div class="clearfix">
                <div class="leftTitle">
                    活跃用户
                    <span class="cursorPointer">
                            <el-tooltip content="活跃用户 = 每天访问页面的总人数" placement="right" effect="light">
                                <el-icon><Warning /></el-icon>
                            </el-tooltip>
                        </span>
                </div>
                <div class="leftCon">
                    <div class="chart-box">
                        <BarChartVue :options-func="chartOptionFunc1"></BarChartVue>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="containerBox">
            
            <div class="clearfix">
                <div class="leftTitle">
                    页面访问次数
                    <span class="cursorPointer">
                            <el-tooltip content="页面访问次数 = 每天用户浏览页面的总次数" placement="right" effect="light">
                                <el-icon><Warning /></el-icon>
                            </el-tooltip>
                        </span>
                </div>
                <div class="leftCon">
                    <div class="chart-box">
                        <BarChartVue :options-func="chartOptionFunc1"></BarChartVue>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import BarChartVue from '@/components/chart/ringChart.vue'
const value2 = ref('');
const dateValueWeek = ref('');
const dateValueMonth = ref('');
const dateValueDates = ref('');
const dateType = ref('dates');
// 时间选择器options
const options = [
  {
    value: 'dates',
    label: '按天',
  },
  {
    value: 'week',
    label: '按周',
  },
  {
    value: 'month',
    label: '按月',
  }
]
let monthChoose = (val: any) => {
    console.log(val)

}
let toplilst = {
    aPrice: '0.00'
}

// 第一个参数为echarts对象  第二个能拿到的是初始化后的当前的echarts实例
function chartOptionFunc1(echarts: any, baseChart: any) {
// 配置初始状态对象  最好这个配置直接去echarts官方直接复制过来，方便又轻松
    const optionObj = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
            }
        ]
    }
// 监听数据更新来更新图表 可以响应式更新图表内容
// watch(EnterpriseDistributionlabel, () => {
//     baseChart.setOption(optionObj)
// })
return optionObj
}
</script>

<style scoped lang="scss">
.containerBox{
    width: calc(100% - 20px);
    box-sizing: border-box;
    margin: 10px;
    // padding: 10px;
    border-radius: 4px;
    border: 1px solid #efefef;
    box-shadow: 0 0 10px #999!important;
    >div{
        margin-bottom: 20px;

        .leftTitle{
            font-size: 18px;
            color: #333;
            border-bottom: 1px solid #efefef;
            padding: 10px;
        }
        .leftCon{
            min-height: 300px;
            
            .chart-box{
                width: calc(100% - 10px);
                height: 300px;
            }
        }
    }
}
</style>